<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title>dbx demo: navigation boxes</title>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />




	<!-- Docking boxes (dbx) by Brothercake - http://www.brothercake.com/ -->
	<script type="text/javascript" src="dbx.js"></script>

	<!-- dbx stylesheet -->
	<link rel="stylesheet" type="text/css" href="dbx.css" media="screen, projection" />





	<!-- styles unrelated to docking boxes demo -->
	<link rel="stylesheet" type="text/css" href="etc.css" media="screen, projection" />

</head>

<body>





	<div id="purple-outer">

		<div class="dbx-group" id="purple">


			<div class="dbx-box">

				<h3 class="dbx-handle" title="Portfolio">Portfolio</h3>

				<ul class="dbx-content">
					<li><a href="http://www.brothercake.com/site/portfolio/cv/" title="An overview of my skillset for prospective clients">CV / Resumee</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/book/" title="The JavaScript Anthology: 101 Essential Tips, Tricks &amp; Hacks">Book 1</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/book2/" title="The Art &amp; Science of JavaScript">Book 2</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/jsur/" title="The JavaScript Ultimate Reference">JS Reference</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/articles/" title="Articles I've had published elsewhere on the web">Articles</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/addons/" title="Add-ons for Firefox and Flock">Firefox Add-ons</a></li>
					<li><a href="http://www.brothercake.com/site/portfolio/menu/" title="UDM was the world's first fully-featured and accessible website menu">UDM</a></li>
				</ul>

			</div>


			<div class="dbx-box">

				<h3 class="dbx-handle" title="Scripts">Scripts</h3>

				<ul class="dbx-content">
					<li><a href="http://www.brothercake.com/site/resources/scripts/iotbs/" title="An efficient multi-media style sheet switcher">IOTBS</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/tooltips/" title="Displays an element's tooltip when it receives the focus">Onfocus tooltips</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/dbx/" title="Adds accessible drag 'n' drop behaviors to any group of elements">Docking boxes</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/beatbox/" title="A simple image previewing script">BeatBox</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/transitions/" title="A range of fade and wipe transitions for image swaps">Image transitions</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/qualifyhref/" title="Converts any relative path into a fully-qualified URL">qualifyHREF</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/parseurl/" title="A JavaScript implementation of PHP's parse_url method">parseURL</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/lojax/" title="A re-creation of XMLHttpRequest for low-specification and legacy browsers">LoJAX</a></li>
					<li><a href="http://www.brothercake.com/site/resources/scripts/domready/" title="Allows DOM scripting to run before window.onload">domFunction</a></li>
				</ul>

			</div>


			<div class="dbx-box">

				<h3 class="dbx-handle" title="Games">Games</h3>

				<ul class="dbx-content">
					<li><a href="http://www.brothercake.com/site/resources/games/frogger/" title="A DHTML version of the classic 80's arcade game">Frogger</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/zenblocks/" title="A cute but mind-bending SVG puzzle">Zen Blocks</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/hangman/" title="A DHTML version of the traditional pen-and-paper game">Hangman</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/chess/" title="A drag 'n' drop chessboard designed for game analysis">Chess Player</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/fishrace/" title="A racing and betting game with cute cartoon fish">Fish Race</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/mastermind/" title="A PHP version of the classic 70's board game">Mastermind</a></li>
					<li><a href="http://www.brothercake.com/site/resources/games/pspgames/" title="A collection of DHTML games written specially for the Sony PSP">PSP games</a></li>
				</ul>

			</div>


			<div class="dbx-box">

				<h3 class="dbx-handle" title="Reference">Reference</h3>

				<ul class="dbx-content">
					<li><a href="http://www.brothercake.com/site/resources/reference/harrypotter/" title="Wouldn&apos;t it be funny if...">Harry Potter: Alternative Ending</a></li>
					<li><a href="http://www.brothercake.com/site/resources/reference/vitanuova/" title="An historical muse on the safety of personal blogging">La Vita Nuova</a></li>
					<li><a href="http://www.brothercake.com/site/resources/reference/psp/" title="Designing and programming websites for the Sony PSP">Web design for the Sony PSP</a></li>
					<li><a href="http://www.brothercake.com/site/resources/reference/3d/" title="Creating dynamic, 3D environments without using images or vector markup">Dynamic 3D with CSS and the DOM</a></li>
				</ul>

			</div>


			<div class="dbx-box">

				<h3 class="dbx-handle" title="Personal">Personal</h3>

				<ul class="dbx-content">
					<li><a href="http://www.brothercake.com/site/personal/music/" title="British underground dance music">Music</a></li>
					<li><a href="http://www.brothercake.com/site/personal/cooking/" title="Festival Cookery Guide">Cooking</a></li>
					<li><a href="http://www.brothercake.com/site/personal/brothercake/" title="About brothercake.com">brothercake.com</a></li>
				</ul>

			</div>


		</div>

	</div>





	<p>
		This is an example of the script in its original setup &#8212; 
		adding usability-enhancing behaviors to grouped content,
		in this case navigational links.
		Users can reposition the boxes, open and close
		them as interested, and the script will remember those
		preferences between page views.
	</p>

	<p>
		The dark purple heading at the top of each box is the
		"drag 'n' drop" handle for mouse navigation;  the arrow icon inside each handle
		is the "press 'n' move" anchor for keyboard navigation;
		this icon is also the toggle button for opening and closing the box.
	</p>






	<!-- dbx configuration script -->
	<script type="text/javascript" src="dbx-key.js"></script>

</body>
</html>